<template>
  <div class="swiper-container">
    <!-- Swiper 容器 -->
    <!-- 轮播项 -->
    <el-button v-for="(item, index) in btnList" :key="index" @click="rightAction(item, index)"
      :class="{ 'img-list-1': currentIndex == index }" :round="round" class="img-list-btn">
      {{ item.text }}
    </el-button>
  </div>
</template>

<script setup>
import { onMounted, ref, defineProps } from "vue";
// 引入 Swiper 核心组件和样式
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
// 引入所需模块（按需导入）
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();


const props = defineProps({
  round: Boolean,
  btnList: Array,
  currentIndex: Number,
});

const routerPath = router.currentRoute.value.fullPath;

// const currentIndex = ref(0);
const rightAction = (item, index) => {
  console.log(item);
  if (routerPath == '/home') {
    router.push('/search')
  }
  // currentIndex.value = index;
};



// 注册使用的模块
const modules = [Autoplay, Pagination, Navigation];

// 轮播图数据

</script>

<style scoped lang="scss">
.swiper-container {
  // display: inline-flex;
  overflow: auto;
  width: 100%;

}

/* 平板设备 */
@media screen and (max-width: 992px) {
  .container {
    width: 90%;
  }
}

/* 移动设备 */
@media screen and (max-width: 768px) {
  .swiper-container {
    display: inline-flex;
    overflow: auto;
    width: 100%;

  }
}

/* 小屏幕手机 */
@media screen and (max-width: 480px) {
  .swiper-container {
    display: inline-flex;
    overflow: auto;
    width: 100%;

  }
}

// 隐藏 swiper-container 得滚动条 但是能拖动
// .swiper-container {
//   -ms-overflow-style: none;
//   scrollbar-width: none;
// }

// .swiper-container::-webkit-scrollbar-track {
//   background-color: transparent;
// }
// .swiper-container::-webkit-scrollbar {
//   display: none;
// }
.img-list-btn {
  margin-top: 0.5rem;
  margin-left: 10px;

}

.img-list-btn:hover {
  border: 1px #fa715d solid;
  color: #fa715d;
  background-color: white !important;
  opacity: 1;
}



.img-list {
  margin-top: 5px;
}

.el-button+.el-button {
  margin-left: 10px;
}



.img-list-1 {
  background-color: #fa715d;
  color: white;
  margin-left: 10px !important;

  border: none;
}
</style>
